<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>inote 云记事</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/container.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/bar.css" />
    <style type="text/css">
        html,body{
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.87);
        }
        #wrap{
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            width: 100%;
        }
        #header{
            position: fixed;
            z-index: 100;
        }
        #main{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            z-index: 0;
        }
        #footer{
            position: fixed;
            bottom: 0px;
            width: 100%;height: 56px;
            background-color: #fff;
            border-top: 1px solid rgba(0,0,0,0.12);
            z-index: 100;
        }
        .edit-menu{
            text-align: center;
        }
        .edit-menu > img{
            width: 24px;
            margin-top: 16px;
        }
        .menuActive{
            background: rgba(0,0,0,0.12);
        }
        .css-test{
            width: 50px;
            height: 50px;
            margin-top: 10px;
            background-color: #2196F3;
            border-radius: 100%;
        }
        .tabActive{
            background-color: #42A5F5;
        }
        .hide{
            display: none;
        }
        .con{
            padding-top: 48px;
            padding-bottom: 56px;
        }
        .show-img{
            width: 100%;
            margin-bottom: -5px;
        }
        .time{
            position: fixed;
            bottom: 56px;
            padding-left: 15px; 
            left: 0px;
            right: 0px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0,0,0,.48);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="ino-bar home-bar">
            <div class="title">相片</div>
            <table class="ino-bar-content">
                <tr>
                    <td>
                        <div class="bar-tab bar-tab-back" tapmode="tabActive" onclick="api.closeWin();">
                            <img class="listTab" src="../image/png/webpage/arrow_back.png">
                        </div>                        
                    </td>
                </tr>
            </table>
        </div>
        <div id="main">
            <div class="con">
                <img class="show-img">
                <div class="time"></div>
            </div>
        </div>
        <div id="footer" class="in-container">
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="share()">
                <img src="../image/png/edit/share.png">
            </div>
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="clickDelete()">
                <img src="../image/png/edit/delete.png">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

    // =====================================================
    // 在被调用时，webpage只接收两个参数
    // @name, @pagename
    // =====================================================

    apiready = function(){
        // 事件处理
        addEventListener();

        var fs = api.require('fs');
        var id = api.pageParam.id;
        var detail = api.pageParam.detail;
        var detailArray = detail.split(',');
        var src = detailArray[0];
        var comSrc = api.fsDir+'/photos/'+detailArray[1];
        var time = detailArray[2];
        // alert(detail);
        var pageimg = $api.dom('.show-img');

        $api.attr(pageimg, 'src', src);
        checkWidthAndHeight(src);
        $api.dom('.time').innerHTML = time;
        // var pagetime = $api.dom('.time');

        // 删除的操作
        api.addEventListener({
            name: 'delete'
        }, function(ret, err){
            if( ret ){
                fs.remove({
                    path: src
                },function( ret, err ){        
                    if( ret.status ){
                        removeFs(comSrc);
                    }
                });
                
            }else{
                // alert( JSON.stringify( err ) );
            }
        });
        function removeFs(src) {
            fs.remove({
                path: src
            },function( ret, err ){        
                if( ret.status ){
                    deleteText();
                    
                }
            });
        };
        function deleteText() {
            var db = api.require('db');
            db.openDatabase({
                name: 'inote',
                path: 'fs://inote.db'
            }, function(ret, err){
                if(ret.status){
                    // 相关的操作放在这里
                    del(id);
                    closeDatabase();
                }else{
                    api.alert({msg:err.msg});
                }
            });
        };
        function closeDatabase() {
            var db = api.require('db');
            db.closeDatabase({
                name:'inote'
            }, function(ret, err){
                if(ret.status){
                    // api.alert({msg:'关闭数据库成功'});
                }else{
                    api.alert({msg:'error'});
                }
            });      
        };
        function executeSql(sql) {
            var db = api.require('db');
            db.executeSql({
                name: 'inote',
                sql: sql
            }, function(ret, err){
                if(ret.status){
                    api.openWin({
                        name: 'root',
                        reload: true
                    });
                    api.closeWin();
                }
            });
        };
        function del(id) {
            var sql = "DELETE FROM Text WHERE id = '"+id+"'";
            executeSql(sql);
        };
    };
    // =====================================================
    // 事件处理
    function addEventListener() {
        // 隐藏footer
        api.addEventListener({
            name: 'hideEditMenu'
        }, function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                $api.removeCls($api.dom('#check'), 'hide');
                $api.addCls($api.dom('#footer'), 'hide');
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    };

    // =====================================================
    // 当点击完成后，发送完成事件给edit
    // 此window显示footer
    function share() {
        // 分享
        var detailArray = api.pageParam.detail.split(',');
        var src = detailArray[0];
        var comSrc = 'fs://photos/'+detailArray[1];
        var time = detailArray[2];

        var sharedModule = api.require("shareAction");
        var sharedMsg = {
            type : "image",
            path : src
        };
        sharedModule.share(sharedMsg);
    };
    function clickDelete() {
        api.openFrame({
            name: 'delete',
            url: 'delete.html',
            bounces: false,
            bgColor: 'rgba(0,0,0,0.4)',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };
    function checkWidthAndHeight(src, id) {
        var img = new Image();
        var imgWidth,imgHeight;
        img.src = src;

        img.onload = function() {
            imgWidth = img.width;
            imgHeight = img.height;
            if (imgWidth > imgHeight) {
                $api.css($api.dom('.show-img'), 'width: auto;height: 100%;overflow-x: auto;');
            };
        };
    };
</script>
</html>